<template>
    <div class="city-search">
      <div class="search">
        <input class="search-input" v-model="keyword" type="text" placeholder="输入城市名或拼音">
      </div>
      <div class="search-content" v-show="keyword" ref="search">
          <ul>
              <li class="search-item border-bottom" 
                v-for="item of list" 
                :key="item.id"
                @click="handleCityClick(item.name)"
              >{{item.name}}</li>
              <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
          </ul>
      </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CitySearch',
  props: {
   cities: Object
  },
  data () {
    return {
        keyword: '',
        list: [],
        timer: null
    }
  },
  computed: {
    hasNoData () {
        return !this.list.length
    }
  },
  methods: {
    handleCityClick (city) {
      this.$store.dispatch('changeCity', city)
      this.$router.push('/')
    }
  },
  watch: {
   keyword () {
     if (this.timer) {
       clearTimeout(this.timer)
     }
     if (!this.keyword) {
      this.list = []
      return
     }
     this.timer = setTimeout(() => {
        const result = []
        for(let i in this.cities) {
          this.cities[i].forEach((value) => {
              if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
                  result.push(value)
              }
          })
        }
        this.list = result
     }, 100)
   }
 },
 mounted () {
   this.scroll = new Bscroll(this.$refs.search)
 }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .search
    height: .72rem
    padding: 0 .1rem
    background: $bgColor
    .search-input
      box-sizing: border-box
      width: 100%
      height: .62rem
      padding: 0 .1rem
      line-height: .62rem
      text-align:center
      border-radius: .06rem
      color: #666666
  .search-content
    z-index: 1
    overflow: hidden
    position: absolute 
    top: 1.58rem
    right: 0
    bottom: 0
    left: 0
    background: #eeeeee
    .search-item
      line-height: .52rem
      padding: .2rem
      background: #ffffff
      color: #666666
</style>
